<template>
  <div class="case-detail">
    <div class="header">
      <h1>{{ caseData.caseName }}</h1>
      <div class="meta-info">
        <span>创建时间：{{ formatDate(caseData.createTime) }}</span>
        <span>更新时间：{{ formatDate(caseData.updateTime) }}</span>
      </div>
    </div>

    <div class="content">
      <section class="description-section">
        <h2>案例描述</h2>
        <p>{{ caseData.description }}</p>
      </section>

      <section class="pseudo-code-section">
        <h2>伪代码</h2>
        <pre><code>{{ caseData.pseudoCode }}</code></pre>
      </section>

      <section class="implementation-section">
        <h2>实现代码</h2>
        <pre><code>{{ caseData.implementation }}</code></pre>
      </section>

      <section class="complexity-section">
        <h2>复杂度分析</h2>
        <pre><code>{{ caseData.complexityAnalysis }}</code></pre>
      </section>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'AlgorithmCaseDetail',
  data() {
    return {
      caseData: {
        caseId: 0,
        typeId: 0,
        caseName: '',
        description: '',
        pseudoCode: '',
        implementation: '',
        complexityAnalysis: '',
        createTime: '',
        updateTime: ''
      }
    }
  },
  created() {
    this.fetchCaseDetail()
  },
  methods: {
    async fetchCaseDetail() {
      try {
        const caseId = this.$route.params.id
        const response = await axios.get(`/api/algorithm-cases/${caseId}`)
        if (response.data.code === 0) {
          this.caseData = response.data.data
        } else {
          console.error('获取案例详情失败:', response.data.message)
          this.$message.error('获取案例详情失败: ' + response.data.message)
        }
      } catch (error) {
        console.error('请求失败:', error)
        this.$message.error('请求失败，请检查网络连接')
      }
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.case-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.meta-info {
  color: #666;
  font-size: 14px;
}

.meta-info span {
  margin-right: 20px;
}

.content section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

h2 {
  color: #34495e;
  margin-bottom: 15px;
  font-size: 1.5em;
}

pre {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  border: 1px solid #eee;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.description-section p {
  line-height: 1.6;
  color: #2c3e50;
}
</style> 